<div id="midnav" ng-controller="CafeDetailCtrl">

<div id="tabs">
<ul>
    <li class="{{currentPage.order}}"><a ng-click="startOrder()">Order Menu</a></li>
    <li class="{{currentPage.review}}"><a ng-click="startReview()">Review</a></li>
</ul>


<div ng-switch on="state">
    <div ng-switch-when="order">
        <div id="tabs-1">

            <div id="check-title">
                <p class="rest_name">{{cafe.name}}</p>

            </div>
            <table class="menu_table" cellpadding="10px" cellspacing="10px"><!-- Table for all menu -->

                <tr class="menu_row"  ng-repeat="row in cafemenus.cafemenus"> <!-- Single Menu Table Row of 3 menu items -->
                    <td class="menu_data" ng-repeat="cafemenu in row">
                        <div class="menu" >
                            <table border="0" cellspacing="0">
                                <tr >
                                    <td valign="top" align="left">
                                        <h2>{{cafemenu.name}}</h2>
                                    </td>
                                    <td valign="bottom" align="center">
                                        <h3 class="price">${{cafemenu.price}}</h3>
                                    </td>
                                </tr>

                                <tr>
                                    <td valign="bottom" width="250px">
                                        <img class="menu_pic" border="2px" src="{{cafemenu.file_name}}" alt="menu1" width="140px" height = "100px">
                                    </td>

                                    <td valign="right"><font size="3">Quantity:</font>
                                        <select name="menu1_quantity" ng-model="cafemenu.quantity">
                                            <option value="">-select-</option>
                                            <option value="1" >1</option>
                                            <option value="2" >2</option>
                                            <option value="3" >3</option>
                                            <option value="4" >4</option>
                                            <option value="5" >5</option>
                                            <option value="6" >6</option>
                                            <option value="7" >7</option>
                                            <option value="8" >8</option>
                                            <option value="9" >9</option>
                                            <option value="10" >10</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td><!--menu item-->
                </tr>

            </table>
            <div id="bottom">
                <p></p>

                <button class="menu_buttons-order" ng-click="startSummary()">Order</button>

                <!--<button class="menu_buttons" ng-click="reset()">Reset</button>-->
                <p></p>
            </div>

        </div><!-- end of tab1 -->

    </div>
    <div ng-switch-when="summary">
        <div id="tabs-1">
            <table border="1" cellspacing="10">
                <tr valign ="top">
                    <td id="order_item_summary">

                        <div id="check-items">

                            <div id="check-title">
                                <p class="rest_name">{{cafe.name}} -> Order Summary </p>
                            </div>

                            <div id="check-items-heading" class="fine_print">
                                <span class="qty_heading">Qty</span>
                                <span class="item_heading">Item</span>
                                <span class="price_heading">Price</span>
                            </div>

                            <ul >

                                <div ng-repeat="order in transaction.orders">

                                    <!-- Add the odd item -->
                                    <li class="single-check-item {{order.oddItem}}">
                                        <span class="check-item-quantity">
                                            <div class="check-item-quanity-value">{{order.quantity}}</div>
                                        </span>
                                        <span class="check-item-details">
                                            {{order.name}}
                                        </span>
                                        <span class="rest_type check-item-price">
                                            {{order.total | currency:"$":2:"'":"." }}
                                        </span>
                                    </li>
                                </div>

                                <li class="check-totals">
                                    <div class="totalRow">
						<span class="label">
							Subtotal
						</span>
						<span class="value">
							{{transaction.total | currency:"$":2:"'":"." }}
						</span>
                                    </div>
                                </li>
                            </ul>
                        </div>


                    </td>
                    <td>

                        <div id="order_control">
                            <h4>&nbsp Choose Order Type:</h4>
                            <!--ORDER TYPE:{{transaction.deliveryType}}-->
                            <ul>
                                <li id="delivery_type">
                                    <form id="delivery_info" class="jqtransform">

                                        <input type="radio" name="delivery_type" value="pickup" ng-model="transaction.deliveryType.delivery">Pickup<br><br>
                                        <input type="radio" name="delivery_type" value="delivery" ng-model="transaction.deliveryType.delivery">Delivery: <b>[*$15 charge will apply]</b> <br>

                                        <table class="address_table" border="0" cellpadding="2">
                                            <tr><td>Name: &nbsp  </td><td colspan="2"><input align="right" type="text" name="contact_name" ng-model="transaction.deliveryType.name"/></td></tr>
                                            <tr><td>Phone: &nbsp </td><td colspan="2"><input id="order_phone" align="right" type="text" name="zip" ng-model="transaction.deliveryType.order_phone" /></td></tr>
                                            <tr><td>Street:&nbsp </td><td colspan="6"><input  class="address_street" type="text" name="street" ng-model="transaction.deliveryType.address_street"/></td></tr>
                                            <tr><td>City: &nbsp  </td><td><input class="address_city" align="right" type="text" name="city" ng-model="transaction.deliveryType.address_city"/></td>
                                                <td>State: &nbsp </td><td><input class="address_state" align="right" type="text" name="state" value="CA" disabled="disabled" ng-model="transaction.deliveryType.address_state"/></td>
                                                <td>Zip: &nbsp </td><td><input class="address_zip" align="right" type="text" name="zip" ng-model="transaction.deliveryType.zip"/></td></tr>
                                        </table>

                                    </form>
                                </li>
                            </ul>

                            <h4>&nbsp Choose Payment Type:</h4>
                           <!-- {{transaction.paymentType}}-->

                            <ul class="payment_control">
                                <li id="payment_type">
                                    <form id="payment_info" class="jqtransform">
                                        <div ng-show="currentCardHolder.authenticated"><input type="radio" name="order_type" value="accessCard"  ng-model="transaction.paymentType.payment">Pay by Access card <b>[10% off]</b><br><br></div>
                                        <input type="radio" name="order_type" value="creditCard"  ng-model="transaction.paymentType.payment">Pay by Credit Card: <br>
                                        <br>
                                        <label class="payment_label">Billing Address: </label>
                                        <table class="address_table" border="0" cellpadding="2">
                                            <tr><td>Street:&nbsp </td><td colspan="6"><input  class="address_street" type="text" name="street" ng-model="transaction.paymentType.address_street"/></td></tr>
                                            <tr><td>City: &nbsp  </td><td><input class="address_city" align="right" type="text" name="city" ng-model="transaction.paymentType.address_city"/></td>
                                                <td>State: &nbsp </td><td><input class="address_state" align="right" type="text" name="state" ng-model="transaction.paymentType.address_state"/></td>
                                                <td>Zip: &nbsp </td><td><input class="address_zip" align="right" type="text" name="zip" ng-model="transaction.paymentType.address_zip"/></td></tr>
                                        </table>
                                        <table class="credit_table" border="1" cellpadding="2">
                                            <tr><td>Credit Type: &nbsp </td><td><input type="radio" name="creditType" value="visa" checked="checked" ng-model="transaction.paymentType.creditType">Visa </td>
                                                <td colspan="2"><input type="radio" name="creditType" value="master" ng-model="transaction.paymentType.creditType">Master </td>
                                            <tr><td>Name: &nbsp  </td><td><input type="text" name="city" ng-model="transaction.paymentType.name"/></td>
                                            <tr><td>Credit Card Number:&nbsp </td><td><input  type="text" name="creditNum" ng-model="transaction.paymentType.creditNum"/></td>
                                                <td>CSV: &nbsp  </td><td><input class="credit_csv" align="right" type="text" name="creditCSV" ng-model="transaction.paymentType.credit_csv"/></td>
                                            <tr><td>Expiration Date: &nbsp  </td><td><input type="date" name="creditExpDate" ng-model="transaction.paymentType.creditExpDate"/></td>
                                        </table>


                                    </form>
                                </li>
                            </ul>



                        </div>

                    </td>
                </tr>
            </table>




            <div id="bottom">
                <p></p>


                <button id="edit_order" class="menu_buttons" ng-click="startOrder()">Edit Order</button>

                <button id="proceed_order" class="menu_buttons" ng-click="completeOrder()">Proceed to Order</button>


                <p></p>
            </div>

        </div><!-- end of tab1 -->














    </div>

    <div ng-switch-when="review">

        <div id="tabs-2">
            <div id="check-title">
                <p class="rest_name">{{cafe.name}} > Review</p>
            </div>

            <div id="review_div">

                <ul class="review" ng-show="currentCardHolder.authenticated">
                    <form>
                        <li>
                            <textarea name="userReview" class="review" id="user_review_input" ng-model="userreview.comment"></textarea><br>
                        </li>


                        <li>
                            <ul id="review_rating">
                                <li id="rating_label">Your Rating:
                                    <select name="rating" ng-model="userreview.rating">
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3">3</option>
                                        <option value="4" >4</option>
                                        <option value="5" >5</option>
                                    </select>
                                </li>
                                <li id="review_button">
                                    <button class="review_buttons" ng-click="addUserReview()">Add Review</button>
                                </li>
                            </ul>
                        </li>
                    </form>
                </ul>

                <div class="user_reviews_div">
                    <div class="user_review_block" ng-repeat="review in reviews.reviews">
                        <p><h3><i>Review by {{review.card_holder_name}} <span id="review_rating_label">Rating: </span><span id="review_rating">{{review.rating}}</span>
                        <span id="review_date">{{review.timestamp}}</span></i></h3></p>
                        <form>
                            <textarea class="user_review{{review.oddItem}}" name="userReview" readonly="readonly">{{review.comment}}
                            </textarea>
                        </form>
                        <br>
                    </div>



                </div>

            </div>
        </div>

    </div>
    
    
    
     <div ng-switch-when="completedorder">

         <div id="check-title">
                <p class="rest_name">{{cafe.name}} -> Order Summary -> Order Completed</p>

         </div>
         
         
         <div id="completedOrder"><h2> {{transaction.completeMessage}} </h2></div>

    </div>
</div>



<!--
<div id="tabs-2">
    <p>Restaurant Review.</p>
</div>

!-->
</div><!-- end of tabs -->
</div><!-- end of midnav -->
